<template>
  <div class="animated fadeIn">
    <!-- 货区货位 2018/3/5 18:22 zhangQ -->
    <Row class="line">
      <Col span="4">
        <label>场站名：</label></Col>
      <Col span="8">
        {{stationName}}
      </Col>
    </Row>
    <Row class="line">
      <Col span="4">
        <label for="surplusSpace">剩余货位数量：</label></Col>
      <Col span="8">
        <Input v-model="surplusSpace" id="surplusSpace" placeholder="剩余货位数量" style="width: 300px"></Input></Col>
    </Row>
    <Row class="line">
      <Col span="4">
        <label for="surplusSpace">剩余面积：</label></Col>
      <Col span="8">
        <Input v-model="surplusArea" placeholder="剩余面积" style="width: 300px"></Input></Col>
    </Row>
    <Row class="line">
      <Col span="4">
        <label for="surplusSpace">租用联系人：</label></Col>
      <Col span="8">
        <Input v-model="userName" placeholder="租用联系人" style="width: 300px"></Input></Col>
    </Row>
    <Row class="line">
      <Col span="4">
        <label for="surplusSpace">租用联系人电话：</label></Col>
      <Col span="8">
        <Input v-model="mobile" placeholder="租用联系人电话" style="width: 300px"></Input></Col>
    </Row>
    <Row class="line">
      <Col span="4">
        <label>最后更新时间：</label></Col>
      <Col span="8">
        {{updateTime}}
      </Col>
    </Row>
    <Row class="line">
      <Col span="4">
        <label>地址：</label></Col>
      <Col span="8">
        {{address}}
      </Col>
    </Row>
    <Row class="line">
      <Col span="5" push="1">
        <Button type="info" @click="seveInfo" long>保存</Button>
      </Col>
    </Row>
  </div>
</template>
<script>
  import {getStationMember, updateStationMember} from '@api/backEnd/station'
  import moment from 'moment'

  export default {
    name: 'stationMember',
    data () {
      return {
        stationName: '',
        surplusSpace: '',
        surplusArea: '',
        userName: '',
        mobile: '',
        updateTime: '',
        address: ''
      }
    },
    created: function () {
      getStationMember().then(res => {
        if (+res.data.isSuccess === 1) {
          this.stationName = res.data.data.station_name
          this.surplusSpace = res.data.data.surplus_space
          this.surplusArea = res.data.data.surplus_area
          this.userName = res.data.data.user_name
          this.mobile = res.data.data.mobile
          this.updateTime = res.data.data.update_time
          this.address = res.data.data.address
        }
        console.log(res.data)
      })
    },
    computed: {},
    methods: {
      seveInfo: function () {
        const surplusSpace = this.surplusSpace
        const surplusArea = this.surplusArea
        const userName = this.userName
        const mobile = this.mobile
        let mobileReg = /^((0\d{2,3}-\d{7,8})|(1[35847]\d{9}))$/
        if (mobile && !mobileReg.test(mobile)) {
          this.$Notice.warning({
            title: '错误',
            desc: '手机号码格式不正确！'
          })
          return
        }
        const param = {surplusSpace, surplusArea, userName, mobile}
        updateStationMember(param).then(res => {
          if (+res.data.isSuccess === 1) {
            this.$Message.success('修改成功')
            this.updateTime = moment().format('yyyy-MM-dd hh:mm:ss')
          } else {
            this.$Message.error('修改失败!' + res.data.res)
          }
        })
      }
    },
    components: {}
  }
</script>
<style scoped>
  .line {
    min-height: 2.5rem;
    line-height: 2.5rem;
  }
</style>
